<template>
	<view :style="colorStyle">
		<!-- 顶部搜索框 -->
		<view class="sticky">
			<view class="" :style="{height:sysHeight + 'px'}"></view>
			<view class="search-content acea-row row-middle" :style="{paddingRight:getHeight.barWidth + 20 + 'px'}">
				<view class="logo">
					<image :src="configData.logo_url" mode=""></image>
				</view>
				<view class="search acea-row row-middle row-between" @click="intoPage">
					<!-- <input type="text" placeholder="请输入搜索词" disabled /> -->
					<text class="">请输入搜索词</text>
					<text class="iconfont icon-ic_search"></text>
				</view>
			</view>
		</view>
		<view class="fix-top__area">
			<view class="swiper-content">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" circular>
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<view class="swiper-item">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="nav acea-row row-middle row-around" v-if="isLogin">
			<navigator hover-class='none' url='/pages/users/user_integral/index' class="item">
				<view class="pictrue" style="width: 86rpx; height: 86rpx;">
					<image src="/static/img/mall05.png"></image>
				</view>
				<view>
					<view class="num">{{userInfo.company ? userInfo.company.score : 0}}</view>
					<text>我的积分</text>
				</view>
			</navigator>
			<view class="line"></view>
			<navigator hover-class='none' url='/pages/users/user_integral/order' class="item">
				<view class="pictrue">
					<image src="/static/img/mall02.png"></image>
				</view>
				<view style="padding-top: 5rpx;">
					<view class="num">{{userInfo.company ? userInfo.company.total_exchange : 0}}<text class="unit">次</text></view>
					<text>兑换记录</text>
				</view>
			</navigator>
		</view>
		<view class="hot" v-if="goodList.length">
			<view class="title">热门推荐</view>
			<scroll-view scroll-x="true" class="scroll">
				<view class="scroll-item" v-for="(item,index) in goodList" :key="index" @click="goGoodsDetail(item)">
					<view class="pictrue">
						<image :src='item.image' mode="aspectFit"></image>
					</view>
					<view class="name line1">{{item.title}}</view>
					<view class="info">已有{{item.sales}}人兑换</view>
					<view class="price-box acea-row row-middle">
						<view class="acea-row row-middle" v-if="parseFloat(item.integral)">
							<image src="/static/img/mall05.png"></image>
							<text class="font-num">{{ item.integral }}</text>
						</view>
						<text v-if="parseFloat(item.integral) && parseFloat(item.price)">+</text>
						<text v-if="parseFloat(item.price)">
							<text class="font-num">{{ item.price }}</text>
							<text class="fs-22">元</text>
						</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="body">
			<view class="body-title">
				<scroll-view scroll-x="true" class="scroll">
					<view class="item" :class="index == current?'on':''" 
					v-for="(item, index) in navList" :key="index" 
					@click="navTap(item,index)">{{item.value}}{{index?'积分':''}}</view>
				</scroll-view>
			</view>
			<view class="product-list" v-if="integralGood.length">
				<view class="product-item" v-for="(item, index) in integralGood" :key="index" 
					@click="goGoodsDetail(item)">
					<easy-loadimage
					mode="aspectFit"
					:image-src="item.image"
					width="314rpx"
					height="314rpx"
					borderRadius="20rpx 20rpx 0 0"></easy-loadimage>
					<view class="info">
						<view class="title line1">
							<text v-if="item.brand_name" class="brand-tag">{{ item.brand_name }}</text>
						{{ item.title }}</view>
						<view class="sales">已有{{item.sales}}人兑换</view>
						<view class="price-box acea-row row-middle">
							<view class="acea-row row-middle" v-if="parseFloat(item.integral)">
								<image src="/static/img/mall05.png"></image>
								<text class="font-num">{{ item.integral }}</text>
							</view>
							<text v-if="parseFloat(item.integral) && parseFloat(item.price)">+</text>
							<text v-if="parseFloat(item.price)">
								<text class="font-num">{{ item.price }}</text>
								<text class="fs-22">元</text>
							</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="no-goods">
				<emptyPage title="暂无商品，去看看别的吧～" src="/statics/images/noActivity.gif"></emptyPage>
			</view>
		</view>
		
		<!-- <view class="pb-safe h-100" v-if="isFooter"></view> -->
		<!-- <pageFooter @newDataStatus="newDataStatus"></pageFooter> -->
	</view>
</template>

<script>
	let sysHeight = uni.getWindowInfo().statusBarHeight;
	import {
	  toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import {
		getStoreIntegral,
		getIntegralCategory,
		getStoreIntegralList
	} from '@/api/activity.js'
	import {getDiy, getDiyVersion, getIndexSwiper} from '@/api/api.js';
	import {
		goShopDetail
	} from '@/libs/order.js';
	import { getUserInfo } from '@/api/user.js';
	import colors from "@/mixins/color";
	import {HTTP_REQUEST_URL} from '@/config/app';
	import emptyPage from '@/components/emptyPage.vue';
	import NavBar from "@/components/NavBar.vue";
	import pageFooter from '@/components/pageFooter/index.vue';
	export default {
		components: { emptyPage, NavBar, pageFooter },
		mixins: [colors],
		data() {
			return {
				swiperList: [],
				configData: this.$Cache.get('BASIC_CONFIG'),
				sysHeight,
				// #ifdef MP
				getHeight: this.$util.getWXStatusHeight(),
				// #endif
				goodList: [],
				navList: [],
				current: 0,
				where: {
					range: '',
					page: 1,
					limit: 10,
				},
				integralGood: [],
				imgHost: HTTP_REQUEST_URL,
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				integral: 0,
				pageScrollStatus:false,
				isFooter: false,
				userInfo: {}
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			// if (this.isLogin) {
			// 	this.getStoreIntegral();
			// } else {
			// 	// toLogin();
			// }
		},
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV == true) {
						this.getStoreIntegral();
						this.getUserInfo()
					}
				},
				deep: true
			},
		},
		onShow(){
			this.getSwiper()
			this.integralCategory();
			this.storeIntegralList();
			uni.removeStorageSync('form_type_cart');
			if (this.isLogin) {
				this.getUserInfo()
				this.getStoreIntegral();
			}
		},
		onPageScroll(object) {
			if (object.scrollTop > 130) {
				this.pageScrollStatus = true;
			} else if (object.scrollTop < 130) {
				this.pageScrollStatus = false;
			}
			uni.$emit('scroll');
		},
		methods: {
			intoPage() {
				uni.navigateTo({
					url: '/pages/goods/goods_search/index'
				})
			},
			getSwiper() {
				getIndexSwiper().then(res => {
					this.swiperList = res.data
				})
			},
			newDataStatus(val) {
				this.isFooter = val ? true : false;
			},
			integralCategory(){
				getIntegralCategory().then(res=>{
					console.log(res, 'res')
					let data = res.data;
					data.unshift({
						value:'全部'
					})
					this.navList = data;
				}).catch(err=>{
					return this.$util.Tips({
						title: err
					});
				})
			},
			navTap(item,index){
				if (this.current === index) return;
				this.current = index;
				this.where.range = item.value;
				this.where.page = 1;
				this.loadend = false;
				this.$set(this, 'integralGood', []);
				this.storeIntegralList();
			},
			storeIntegralList(){
				if (this.loadend) return;
				if (this.loading) return;
				this.loading = true;
				getStoreIntegralList(this.where).then(res=>{
					let list = res.data;
					let limit = this.where.limit;
					this.where.page++;
					this.loadend = limit > list.length;
					this.integralGood = this.integralGood.concat(list);
					this.loading = false;
					this.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
				}).catch(err=>{
					this.loading = false;
					this.loadTitle = '加载更多';
					return this.$util.Tips({
						title: err
					});
				})
			},
			goarrow(){
				uni.navigateBack()
			},
			getStoreIntegral() {
				getStoreIntegral().then(res => {
					this.goodList = res.data.list;
					this.integral = res.data.integral;
				})
			},
			// 去商品详情
			goGoodsDetail(item) {
				uni.navigateTo({
					url: `/pages/activity/goods_details/index?id=${item.id}&type=4`
				});
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo() {
				let that = this;
				getUserInfo().then((res) => {
					that.userInfo = res.data;
				})
			},
		},
		onReachBottom() {
			this.storeIntegralList();
		},
		//#ifdef MP
		onShareAppMessage() {
			let that = this;
			return {
				title: '积分商城',
				path: '/pages/activity/points_mall/index?spid=' + that.$store.state.app.uid,
				// desc: ''
			};
		},
		//分享到朋友圈
		onShareTimeline: function() {
			let that = this;
			return {
				title: '积分商城',
				path: '/pages/activity/points_mall/index?spid=' +  + that.$store.state.app.uid,
				// desc: ''
			};
		}
		//#endif
	}
</script>

<style>
	page{
		padding-bottom: 1rpx;
	}
</style>
<style lang="scss" scoped>
	.sticky {
		position: sticky;
		top: 0;
		z-index: 10;
		background-image: linear-gradient(#f00, #ff6e69);
		.search-content {
			padding: 10rpx 15rpx;
			.logo {
				width: 70rpx;
				height: 70rpx;
				margin-right: 20rpx;
				image {
					width: 70rpx;
					height: 70rpx;
				}
			}
			.search {
				flex: 1;
				// width: 400rpx;
				height: 70rpx;
				border-radius: 70rpx;
				background-color: rgba(255,255,255,0.6);
				padding: 0 30rpx;
				color: #fff;
				input {
					flex: 1;
					color: #fff;
				}
			}
		}
	}
	.fix-top__area {
		width: 100%;
		
		.swiper-content {
			padding: 10rpx 20rpx 20rpx;
			background-image: linear-gradient(#ff6e69, #f5f5f5);
			margin-top: -1px;
			swiper {
				width: 100%;
				height: 350rpx;
			}
			.swiper-item {
				image {
					display: block;
					width: 100%;
					height: 350rpx;
					border-radius: 20rpx;
				}
			}
		}
		
	}
	.accountTitle{
		background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
		position: fixed;
		left:0;
		top:0;
		width: 100%;
		z-index: 99;
		.sysTitle{
			width: 100%;
			position: relative;
			font-weight: 500;
			color: #fff;
			font-size: 30rpx;
			.iconfont{
				position: absolute;
				font-size: 36rpx;
				left:11rpx;
				width: 60rpx;
			}
		}
	}

	.header{
		width: 100%;
		height: 400rpx;
		background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
		position: relative;

		.record{
			width: 124rpx;
			height: 48rpx;
			background-color: rgba(51, 51, 51, 0.2);
			border-radius: 50rpx 0 0 50rpx;
			font-weight: 400;
			color: #FFFFFF;
			font-size: 24rpx;
			position: absolute;
			right: 0;
			top:36rpx;
		}

		&::after{
			position: absolute;
			content: '';
			width: 100%;
			height: 105rpx;
			background: linear-gradient(180deg, rgba(233,51,35,0) 0%, var(--view-minorColorT) 50%, #F5F5F5 100%);
		}

		.headerBg{
			// background-image: url('../../static/img/mall01.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 689rpx;
			height: 298rpx;
			margin: 0 auto;
			padding-top: 88rpx;
			.pictrue{
				width: 345rpx;
				height: 76rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.num{
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(255,255,255,0.6);
				margin: 4rpx 0 0 12rpx;
			}
		}
	}

	.hot{
		background-color: #fff;
		width: 710rpx;
		border-radius: 24rpx;
		margin: 0 auto 20rpx auto;
		padding: 32rpx 0 20rpx 32rpx;
		.title{
			font-weight: 600;
			color: #333333;
			font-size: 32rpx;
		}

		.scroll{
			white-space: nowrap;
			margin-top: 26rpx;
			.scroll-item{
				display: inline-block;
				width: 224rpx;
				margin-right: 20rpx;
				vertical-align: top;
				.pictrue{
					width: 100%;
					height: 224rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
				.name{
					font-weight: 400;
					color: #333333;
					font-size: 26rpx;
					margin-top: 16rpx;
				}
				.info{
					color: #999999;
					font-size: 22rpx;
					margin-top: 8rpx;
				}
				.price-box{
					font-size: 24rpx;
					font-weight: 500;
					margin-top: 10rpx;
					color: #666;
					image{
						width: 31rpx;
						height: 31rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	.nav{
		width: 710rpx;
		height: 184rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 0 auto 20rpx;
		position: relative;

		.item{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			// text-align: center;
			width: 45%;
			.pictrue{
				width: 81rpx;
				height: 81rpx;
				margin-right: 20rpx;
				// margin: 0 auto 16rpx auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.num {
				color: #f00;
				font-size: 40rpx;
				text-align: left;
				font-family: SemiBold;
				margin-bottom: 5rpx;
				padding-top: 3rpx;
				.unit {
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
		}
		.line{
			width: 1px;
			height: 70rpx;
			background-color: #F3F3F3;
		}
	}

	.body {
		background-color: #fff;
		width: 710rpx;
		margin: 0 auto 20rpx auto;
		border-radius: 24rpx;
		padding-bottom: 20rpx;

		.body-title {
			padding-left: 32rpx;
			.scroll{
				white-space: nowrap;
				.item{
					display: inline-block;
					margin-right: 60rpx;
					padding: 34rpx 0 38rpx 0;
					font-size: 28rpx;
					font-weight: 400;
					&.on{
						font-weight: 500;
						color: var(--view-theme);
						position: relative;
						font-size: 30rpx;
						&::after{
							position: absolute;
							content: '';
							width: 36rpx;
							height: 30rpx;
							border: 2px solid var(--view-theme);
							border-left: 2px solid transparent !important;
							border-top: 2px solid transparent !important;
							border-right: 2px solid transparent !important;
							border-radius: 50%;
							left:50%;
							bottom: 22rpx;
							margin-left: -24rpx;
						}
					}
				}
			}
		}

		.product-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 28rpx;

			.product-item {
				position: relative;
				width: 314rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.info {
					margin-top: 20rpx;

					.title {
						font-size: 28rpx;
					}

					.price-box{
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 10rpx;
						color: #666;
						image{
							width: 31rpx;
							height: 31rpx;
							margin-right: 8rpx;
						}
						.font-num {
							font-family: SemiBold;
							font-size: 30rpx;
						}
					}

					.sales {
						font-size: 24rpx;
						color: #999999;
						margin-top: 8rpx;
					}
				}
			}
		}
	}
</style>
